<extend name="Public/base"/>

<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>交易量</h2>
    </div>

    <!-- 数据列表 -->
    <div class="data-table with-padding">
 
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:100px;height:100px;"></div>
    </div>                                           
    <div class="with-padding">
        {$_page}
    </div>
</block>

<block name="script">
   
    <!-- 引入 echarts.js -->
    <script src="__STATIC__/echarts.min.js"></script>
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>

  <script type="text/javascript">
  
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
      var option = {
    		  title: {
                  text: '领域内交易量'
              },
    		    tooltip: {
    		        trigger: 'axis'
    		    },
    		    toolbox: {
    		        feature: {
    		            dataView: {show: true, readOnly: false},
    		            magicType: {show: true, type: ['line', 'bar']},
    		            restore: {show: true},
    		            saveAsImage: {show: true}
    		        }
    		    },
    		    legend: {
    		        data:['交易量','总交易金额']
    		    },
    		    xAxis: [
    		        {
    		            type: 'category',
    		            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    		        }
    		    ],
    		    yAxis: [
    		        {
    		            type: 'value',
    		            name: '单数',
    		            min: 0,
    		            max: 20,
    		            interval:4,
    		            axisLabel: {
    		                formatter: '{value} 笔'
    		            }
    		        },
    		        {
    		            type: 'value',
    		            name: '金额',
    		            min: 0,
    		            max: 25,
    		            interval: 5,
    		            axisLabel: {
    		                formatter: '{value} 万元'
    		            }
    		        }
    		    ],
    		    series: [
    		        {
    		            name:'交易量',
    		            type:'bar',
    		            data:[4, 5, 5, 5, 6, 9, 11, 10, 12, 8, 6, 3]
    		        },

    		        {
    		            name:'总交易金额',
    		            type:'line',
    		            yAxisIndex: 1,
    		            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    		        }
    		    ]
    		};

   


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        //导航高亮
        highlight_subnav("{:U('Hostdata/trading')}");
    </script>
</block>